<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>用款申请-详细</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=f5a12a1d">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <style>
        .table > tbody > tr > td {
            height: 24px;
            max-height: 24px;
            overflow: hidden;
            position: relative;
        }

        .jiu {
            position: absolute;
            width: 10px;
            height: 10px;
            top: 2px;
            right: 2px;
            background: url("/dist/img/jiu.png");
        }

        .moduleName {
            float: left;
            height: 27px;
            line-height: 27px;
            font-size: 22px;
            width: 100px;
            text-align: center;
        }

        .tryStyle {
            width: 30px;
            height: 14px;
            line-height: 14px;
            font-size: 12px;
            /* top: 0; */
            right: 0;
            position: absolute;
            border-radius: 5px;
            margin-top: 1px;
            background: red;
            color: #fff;
            margin-right: -2px;
            transform: scale(0.8);
        }

        .nav-tabs-custom {
            margin-bottom: 0;
            box-shadow: none;
            position: relative;
        }

        span.lineOne {
            line-height: 27px !important;
            height: 28px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .table-detail td.twoLine {
            line-height: 1.5 !important;
            padding: 3px 0 !important;
        "
        }

        .table-detail select {
            text-indent: 0 !important;
            padding-left: 0 !important;
            margin-left: -4px !important;
        }

        .fixed-table_body tr td {
            border-right: none;
            font-size: 12px;
            text-align: center;
            line-height: 24px;
            text-align: center !important;
        }

        .fixed-table_header tr th {
            border-right: none;
            background: yellow;
            font-weight: normal;
            font-size: 12px;
            line-height: 24px;
            text-align: center !important;
        }


        .fixed-table_body tr:nth-of-type(odd) {
            background: #F9F9F9;
        }

        .gray td {
            color: #CCCCCC !important;
        }

        .td-tanZongStyle-line textarea {
            box-shadow: inset 1px 1px 4px #333;
            display: block;
        }

        .td-tanZongStyle-line span {
            padding-left: 4px !important;
        }

        table td.td-tanZongStyle-line span, table td.td-tanZongStyle-line div {
            display: inline;
            line-height: 24px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .table-detail td.td-tanZongStyle-line {
            height: 100% !important;
            padding: 1px !important;

        }

        .td-tanZongStyle-line select {
            box-shadow: inset 1px 1px 4px #333;
            padding-left: 4px;
            height: 34px;
            line-height: 34px;
            width: 100%;
            color: #2a8cec;
            box-shadow: inset 1px 1px 4px #333;
            padding-left: 4px !important;
            border: 1px solid rgb(238, 238, 238);
        }

        .td-tanZongStyle-line input {
            box-shadow: inset 1px 1px 4px #333;
            padding-left: 4px;
            height: 34px;
            line-height: 34px;
            width: 100%;
            color: #2a8cec;
            border: 1px solid rgb(238, 238, 238);

        }

        .title {
            text-align: center;
        }

        .td-box input {
            padding-left: 8px;
        }

        .td-box textarea {
            padding-left: 8px;
        }

    </style>
</head>
<body>
<iframe id="ifAttach" style="display:none"></iframe>
<div class="layout" style="left:0px;top:0px;right:0px;bottom:0px;" id="app" v-cloak>
    <div class="div-td-content-more"><i></i></div>

    <!--适用的机型-->
    <div style="border-bottom: #CDCDCD  1px solid;margin-left: 8px;margin-top: 10px;margin-right: 8px;padding-bottom: 5px">
        <span style="font-size: 16px;font-weight: 700;">适用的机型</span>
    </div>
    <div class="fixed-table-box head-fixed " style="width: 100%;padding-left: 8px;padding-right: 8px;padding-top: 8px;">
        <div class="fixed-table_header-wraper" style="width: 100%;">
            <table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
                <thead>
                <tr>
                    <th style="width: 5%">
                        <div class="table-cells">序号</div>
                    </th>
                    <th style="width: 14%">
                        <div class="table-cells">设备类型</div>
                    </th>
                    <th style="width: 14%">
                        <div class="table-cells"> 设备品牌</div>
                    </th>
                    <th style="width: 14%">
                        <div class="table-cells">设备型号</div>
                    </th>
                    <th>
                        <div class="table-cells"> 序列号段</div>
                    </th>
                    <th style="width: 14%">
                        <div class="table-cells"> 操作</div>
                    </th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="fixed-table_body-wraper iframeFixed">
            <table class="fixed-table_body table-hover" cellspacing="0" cellpadding="0" border="0"
                   style="width: 100%;">
                <tbody>
                <tr v-for="(item,i) in applicableDeviceList">
                    <td style="width: 5%">{{i+1}}</td>
                    <td style="width: 14%" class="td-tanZongStyle-line">
                        <div class="td-box">
                            <select v-model="item.deviceTypeId"
                                    @change="getBrandListByTypeId(item)">
                                <option value=""></option>
                                <option v-for="(item2,i2) in item.deviceTypeList" :value="item2.id">
                                    {{item2.typeName}}
                                </option>
                            </select>
                        </div>
                    </td>
                    <td style="width: 14%" class="td-tanZongStyle-line">
                        <div class="td-box">
                            <select v-model="item.deviceBrandId"
                                    @change="getModelListByBrandId(item)">
                                <option value=""></option>
                                <option v-for="(item2,i2) in item.deviceBrandList" :value="item2.brandId">
                                    {{item2.brandName}}
                                </option>
                            </select>
                        </div>
                    </td>
                    <td style="width: 14%" class="td-tanZongStyle-line">
                        <div class="td-box">
                            <select v-model="item.deviceModelId">
                                <option value=""></option>
                                <option v-for="(item2,i) in item.deviceModelList" :value="item2.modelId">
                                    {{item2.modelName}}
                                </option>
                            </select>
                        </div>
                    </td>
                    <td class="td-tanZongStyle-line">
                        <div class="td-box">
                            <input type="text" v-model="item.serialNumberStart" autocomplete="off"
                                   style="width: 49%" placeholder="开始">
                            <input type="text" v-model="item.serialNumberEnd" autocomplete="off" style="width: 49%"
                                   placeholder="结束">
                        </div>

                    </td>
                    <td style="width: 14%">
                            <span style="width: 49%;color: #2a8cec;"
                                  @click="addItem('applicableDevice',i)">添加一行</span>
                        <span style="width: 49%;color: #2a8cec;"
                              @click="delItem('applicableDevice',i)">删除一行</span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

    </div>

    <!--&lt;!&ndash;适用的部件&ndash;&gt;-->
    <div style="border-bottom: #CDCDCD  1px solid;margin-left: 8px;margin-top: 10px;margin-right: 8px;padding-bottom: 5px;padding-top: 8px;">
        <span style="font-size: 16px;font-weight: 700;">适用的部件</span>
    </div>
    <div class="fixed-table-box head-fixed " style="width: 100%;padding-left: 8px;padding-right: 8px;padding-top: 8px;">
        <div class="fixed-table_header-wraper" style="width: 100%;">
            <table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
                <thead>
                <tr>
                    <th style="width: 5%">
                        <div class="table-cells">序号</div>
                    </th>
                    <th style="width: 14%">
                        <div class="table-cells">设备类型</div>
                    </th>
                    <th style="width: 14%">
                        <div class="table-cells">部件类型</div>
                    </th>
                    <th style="width: 14%">
                        <div class="table-cells">部件属性</div>
                    </th>
                    <th>
                        <div class="table-cells">部件参数</div>
                    </th>
                    <th style="width: 14%">
                        <div class="table-cells"> 操作</div>
                    </th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="fixed-table_body-wraper iframeFixed">
            <table class="fixed-table_body table-hover" cellspacing="0" cellpadding="0" border="0"
                   style="width: 100%;">
                <tbody>
                <tr v-for="(item,i) in applicablePartsList">
                    <td style="width: 5%">{{i+1}}</td>
                    <td style="width: 14%" class="td-tanZongStyle-line">
                        <div class="td-box">
                            <select v-model="item.deviceTypeId"
                                    @change="getPartsTypeListByTypeId(item)">
                                <option value=""></option>
                                <option v-for="(item2,i2) in item.deviceTypeList" :value="item2.id">
                                    {{item2.typeName}}
                                </option>
                            </select>
                        </div>
                    </td>
                    <td style="width: 14%" class="td-tanZongStyle-line">
                        <div class="td-box">
                            <select v-model="item.partsTypeId"
                                    @change="getPropertyListByPartsTypeId(item)">
                                <option value=""></option>
                                <option v-for="(item2,i2) in item.partTypeList" :value="item2.id">
                                    {{item2.partTypeName}}
                                </option>
                            </select>
                        </div>
                    </td>
                    <td style="width: 14%" class="td-tanZongStyle-line">
                        <div class="td-box">
                            <select v-model="item.partsPropertyId">
                                <option value=""></option>
                                <option v-for="(item2,i2) in item.partPropertyList" :value="item2.id">
                                    {{item2.partPropertyName}}
                                </option>
                            </select>
                        </div>
                    </td>
                    <td class="td-tanZongStyle-line">
                        <div class="td-box">
                            <input type="text" v-model="item.partsParameter" autocomplete="off"
                                   style="width: 100%" placeholder="请填写部件参数">
                        </div>

                    </td>
                    <td style="width: 14%">
                                  <span style="width: 49%;color: #2a8cec;"
                                        @click="addItem('applicableParts',i)">添加一行</span>
                        <span style="width: 49%;color: #2a8cec;"
                              @click="delItem('applicableParts',i)">删除一行</span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

    </div>

    <!--&lt;!&ndash;配件分类及属性&ndash;&gt;-->
    <div style="border-bottom: #CDCDCD  1px solid;margin-left: 8px;margin-top: 10px;margin-right: 8px;padding-bottom: 5px;padding-top: 8px;">
        <span style="font-size: 16px;font-weight: 700;">配件分类及属性</span>
    </div>
    <div class="fixed-table-box head-fixed " style="width: 100%;padding-left: 8px;padding-right: 8px;padding-top: 8px;">
        <div class="fixed-table_body-wraper iframeFixed">
            <table cellspacing="0" class="table-my" style="width: 100%">
                <tbody>
                <tr>
                    <td class="title" style="width: 25%">配件1级分类</td>
                    <td style="width: 25%" class="td-tanZongStyle-line">
                        <div class="td-box">
                            <select v-model="details.partsClassificationFirstId"
                                    @change="getPartsClassificationSecondListByFirstId()">
                                <option value=""></option>
                                <option v-for="(item,i) in classificationFirstList"
                                        :value="item.partsClassificationFirstId">
                                    {{item.classificationName}}
                                </option>
                            </select>
                        </div>
                    </td>
                    <td class="title" style="width: 25%">配件2级分类</td>
                    <td style="width: 25%" class="td-tanZongStyle-line">
                        <div class="td-box">
                            <select v-model="details.partsClassificationSecondId"
                                    @change="getPartsClassificationThirdListBySecondId()">
                                <option value=""></option>
                                <option v-for="(item,i) in classificationSecondList"
                                        :value="item.partsClassificationSecondId">
                                    {{item.secondClassificationName}}
                                </option>
                            </select>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="title" style="width: 25%">配件名称</td>
                    <td style="width: 25%" class="td-tanZongStyle-line">
                        <div class="td-box">
                            <select v-model="details.partsClassificationThirdId" @change="getAlias()">
                                <option value=""></option>
                                <option v-for="(item,i) in classificationThirdList" :value="item.id">
                                    {{item.classificationName}}
                                </option>
                            </select>
                        </div>
                    </td>
                    <td class="title" style="width: 25%">配件别名</td>
                    <td style="width: 25%">
                        <div class="td-box">
                            <span style="color: #2a8cec;padding-left: 8px">{{alias}}</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="title" style="width: 25%">主机厂零件号</td>
                    <td style="width: 25%" class="td-tanZongStyle-line">
                        <div class="td-box">
                            <input type="text" v-model="details.producerPartNumber" autocomplete="off">
                        </div>
                    </td>
                    <td class="title" style="width: 25%">单车用量</td>
                    <td style="width: 25%" class="td-tanZongStyle-line">
                        <div class="td-box">
                            <input type="text" v-model="details.machineConsumption" autocomplete="off">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="title" style="width: 25%">规格参数</td>
                    <td style="width: 25%" class="td-tanZongStyle-line">
                        <div class="td-box">
                            <input type="text" v-model="details.specificationParameter" autocomplete="off">
                        </div>
                    </td>
                    <td class="title" style="width: 25%"></td>
                    <td style="width: 25%" class="td-tanZongStyle-line">

                    </td>
                </tr>
                <tr>
                    <td class="title">备注</td>
                    <td style="width: 14%" class="td-tanZongStyle-line" colspan="3">
                        <div class="td-box">
                            <textarea v-model="details.remark" style="width:100%;color:#2a8cec "></textarea>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="title">品牌件号</td>
                    <td style="" class="td-tanZongStyle-line" colspan="3">
                        <div class="fixed-table-box head-fixed " style="width: 100%;">
                            <div class="fixed-table_header-wraper" style="width: 100%;">
                                <table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0"
                                       style="width: 100%;">
                                    <thead>
                                    <tr>
                                        <th style="width: 5%">
                                            <div class="table-cells">序号</div>
                                        </th>
                                        <th style="width: 25%">
                                            <div class="table-cells"> 品牌</div>
                                        </th>
                                        <th style="width: 25%">
                                            <div class="table-cells">件号</div>
                                        </th>
                                        <th style="width: 25%">
                                            <div class="table-cells">备注</div>
                                        </th>
                                        <th style="width: 20%">
                                            <div class="table-cells"> 操作</div>
                                        </th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                            <div class="fixed-table_body-wraper iframeFixed">
                                <table class="fixed-table_body table-hover" cellspacing="0" cellpadding="0" border="0"
                                       style="width: 100%;">
                                    <tbody>
                                    <tr v-for="(item,i) in brandNumberList">
                                        <td style="width: 5%">{{i+1}}</td>
                                        <td style="width: 25%" class="td-tanZongStyle-line">
                                            <div class="td-box">
                                                <select v-model="item.partsBrandId">
                                                    <option value=""></option>
                                                    <option v-for="(item2,i2) in brandList" :value="item2.id">
                                                        {{item2.brandName}}
                                                    </option>
                                                </select>
                                            </div>
                                        </td>
                                        <td class="td-tanZongStyle-line" style="width: 25%">
                                            <div class="td-box">
                                                <input type="text" v-model="item.brandNumber" autocomplete="off"
                                                       style="width: 100%">
                                            </div>
                                        </td>
                                        <td class="td-tanZongStyle-line" style="width: 25%">
                                            <div class="td-box">
                                                <input type="text" v-model="item.remark" autocomplete="off"
                                                       style="width: 100%">
                                            </div>
                                        </td>
                                        <td>
                                         <span style="width: 49%;color: #2a8cec;"
                                               @click="addItem('brandNumber',i)">添加一行</span>
                                            <span style="width: 49%;color: #2a8cec;"
                                                  @click="delItem('brandNumber',i)">删除一行</span>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </td>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!--&lt;!&ndash;其他属性&ndash;&gt;-->
    <div style="border-bottom: #CDCDCD  1px solid;margin-left: 8px;margin-top: 10px;margin-right: 8px;padding-bottom: 5px;padding-top: 8px;">
        <span style="font-size: 16px;font-weight: 700;">其他属性</span>
    </div>
    <div class="fixed-table-box head-fixed " style="width: 100%;padding-left: 8px;padding-right: 8px;padding-top: 8px;">
        <div class="fixed-table_body-wraper iframeFixed">
            <table cellspacing="0" class="table-my" style="width: 100%">
                <tbody>
                <tr>
                    <td class="title">关联1级分类</td>
                    <td style="width: 14%" class="td-tanZongStyle-line">
                        <div class="td-box">
                            <select v-model="details.relevantClassificationFirstId"
                                    @change="getPartsClassificationSecondListByFirstId2()">
                                <option value=""></option>
                                <option v-for="(item,i) in classificationFirstList"
                                        :value="item.partsClassificationFirstId">
                                    {{item.classificationName}}
                                </option>
                            </select>
                        </div>
                    </td>
                    <td class="title">关联2级分类</td>
                    <td style="width: 14%" class="td-tanZongStyle-line">
                        <div class="td-box">
                            <select v-model="details.relevantClassificationSecondId">

                                <option value=""></option>
                                <option v-for="(item,i) in classificationSecondList2"
                                        :value="item.partsClassificationSecondId">
                                    {{item.secondClassificationName}}
                                </option>
                            </select>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!--保存-->
    <div class="south no-print" style="height:50px;line-height:50px;text-align:center;">
        <input type="button" style="margin-left:20px;" @click="save()"
               value="保存" class="btn oaBtn btn-sm"/>
    </div>
</div>


<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=63aed32f"></script>

<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<!--ztree组件所需js-->
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.exhide-3.5.js"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="/dist/js/pages/apply/money/class.js"></script>
<script type="text/javascript" src="/dist/js/pages/system/systemService.js"></script>
<script type="text/javascript" src="/dist/js/pages/common/commonService.js"></script>
<script type="text/javascript" src="/dist/js/pages/common/changeMoneyToChinese.js"></script>
<script type="text/javascript" src="/dist/plugins/print/print.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });

</script>
<script type="text/javascript">
    var api = frameElement.api, W = api.opener;


    var app = new Vue({
            el: "#app",
            data: {
                thirdItemNo: '',
                userId: $.peiJian.page.urlParams.userId,
                detailsId: '',
                deviceTypeList: [],
                deviceModelList: [],
                deviceBrandList: [],
                partTypeList: [],
                partPropertyList: [],
                brandList: [],
                classificationFirstList: [],
                classificationSecondList: [],
                classificationThirdList: [],
                classificationSecondList2: [],
                details: {
                    partsClassificationFirstId: '',
                    partsClassificationSecondId: '',
                    partsClassificationThirdId: '',
                    producerPartNumber: '',
                    machineConsumption: '',
                    specificationParameter: '',
                    remark: '',
                    relevantClassificationFirstId: '',
                    relevantClassificationSecondId: '',
                },
                alias: '',
                applicableDeviceList: [{
                    partsDetailsId: this.detailsId,
                    deviceTypeId: '',
                    deviceBrandId: '',
                    deviceModelId: '',
                    serialNumberStart: '',
                    serialNumberEnd: '',
                    deviceBrandList: [],
                    deviceTypeList: [],
                    deviceModelList: [],
                }],
                applicablePartsList: [{
                    partsDetailsId: this.detailsId,
                    deviceTypeId: '',
                    partsTypeId: '',
                    partsPropertyId: '',
                    partsParameter: '',
                    deviceTypeList: [],
                    partTypeList: [],
                    partPropertyList: [],
                }],
                brandNumberList: [{
                    partsDetailsId: this.detailsId,
                    partsBrandId: '',
                    brandNumber: '',
                    remark: '',
                }],
            },
            methods: {
                addItem: function (prop, i) {
                    var that = this;
                    switch (prop) {
                        case 'applicableDevice' :
                            var applicableDevice = {
                                partsDetailsId: that.detailsId,
                                deviceTypeId: '',
                                deviceBrandId: '',
                                deviceModelId: '',
                                serialNumberStart: '',
                                serialNumberEnd: '',
                                deviceBrandList: [],
                                deviceModelList: [],
                                deviceTypeList: that.deviceTypeList,
                            };
                            that.applicableDeviceList.splice(i + 1, 0, applicableDevice);
                            break;
                        case 'applicableParts' :
                            var applicableParts = {
                                partsDetailsId: that.detailsId,
                                deviceTypeId: '',
                                partsTypeId: '',
                                partsPropertyId: '',
                                partsParameter: '',
                                deviceTypeList: that.deviceTypeList,
                                partTypeList: [],
                                partPropertyList: [],
                            };
                            that.applicablePartsList.splice(i + 1, 0, applicableParts);
                            break;
                        case 'brandNumber' :
                            var brandNumber = {
                                partsDetailsId: that.detailsId,
                                partsBrandId: '',
                                brandNumber: '',
                                remark: '',
                            };
                            that.brandNumberList.splice(i + 1, 0, brandNumber);
                            break;
                    }
                },
                delItem: function (prop, i) {
                    var that = this;
                    switch (prop) {
                        case 'applicableDevice' :
                            that.applicableDeviceList.splice(i, 1);
                            break;
                        case 'applicableParts' :
                            that.applicablePartsList.splice(i, 1);
                            break;
                        case 'brandNumber' :
                            that.brandNumberList.splice(i, 1);
                            break;
                    }
                },
                save: function () {
                    var that = this;
                    var details = that.details;
                    details.partId = that.details.partsClassificationThirdId;
                    details.id = that.detailsId;
                    var applicableDeviceList = that.applicableDeviceList;
                    if (applicableDeviceList && applicableDeviceList.length > 0) {
                        for (var i = 0; i < applicableDeviceList.length; i++) {
                            delete applicableDeviceList[i].deviceBrandList;
                            delete applicableDeviceList[i].deviceModelList;
                            delete applicableDeviceList[i].deviceTypeList;
                        }
                    }
                    var applicablePartsList = that.applicablePartsList;
                    if (applicablePartsList && applicablePartsList.length > 0) {
                        for (var i = 0; i < applicablePartsList.length; i++) {
                            delete applicablePartsList[i].deviceTypeList;
                            delete applicablePartsList[i].partPropertyList;
                            delete applicablePartsList[i].partTypeList;
                        }
                    }
                    var data = {
                        userId: that.userId,
                        applicableDevice: applicableDeviceList,
                        applicableParts: applicablePartsList,
                        brandNumber: that.brandNumberList,
                        details: details
                    };
                    $.peiJian.postMethod(peiJianUrlConfig.parts.saveDetails, trimRN(data), function (data) {
                        if (data.id && data.id != '') {
                            alert("保存成功");
                        } else {
                            alert("保存失败");
                        }
                        top.refreshTabByName("配件管理", "no");
                        api.close();
                    });
                },
                getAlias: function () {
                    var that = this;
                    if (that.classificationThirdList && that.classificationThirdList.length > 0) {
                        for (var i = 0; i < that.classificationThirdList.length; i++) {
                            if (that.classificationThirdList[i].id == that.details.partsClassificationThirdId) {
                                that.alias = that.classificationThirdList[i].alias;
                            }
                        }
                    }
                },
                getBrandListByTypeId: function (item) {
                    var that = this;
                    $.peiJian.postMethod(peiJianUrlConfig.device.getBrandListByTypeId, {
                        userId: that.userId,
                        typeId: item.deviceTypeId,
                    }, function (data) {
                        item.deviceBrandList = data.records;
                    }, true);
                },
                getModelListByBrandId: function (item) {
                    var that = this;
                    $.peiJian.postMethod(peiJianUrlConfig.device.getModelListByBrandId, {
                        userId: that.userId,
                        typeId: item.deviceTypeId,
                        brandId: item.deviceBrandId,
                    }, function (data) {
                        item.deviceModelList = data.records;
                    }, true);
                },
                getTypeList: function () {
                    var that = this;
                    $.peiJian.postMethod(peiJianUrlConfig.device.getTypeList, {
                        userId: that.userId
                    }, function (data) {
                        that.deviceTypeList = data.records;
                    }, true);
                },
                getPartsTypeListByTypeId: function (item) {
                    var that = this;
                    $.peiJian.postMethod(peiJianUrlConfig.parts.getPartsTypeListByTypeId, {
                        userId: that.userId,
                        deviceTypeId: item.deviceTypeId,
                    }, function (data) {
                        item.partTypeList = data.records;
                    }, true);
                },
                getPropertyListByPartsTypeId: function (item) {
                    var that = this;
                    $.peiJian.postMethod(peiJianUrlConfig.parts.getPropertyListByPartsTypeId, {
                        userId: that.userId,
                        partTypeId: item.partsTypeId,
                    }, function (data) {
                        item.partPropertyList = data.records;
                    }, true);
                },
                getPartsClassificationThirdListBySecondId: function () {
                    var that = this;
                    $.peiJian.postMethod(peiJianUrlConfig.partsClassification.getPartsClassificationThirdListBySecondId, {
                        userId: that.userId,
                        id: that.details.partsClassificationSecondId,
                    }, function (data) {
                        that.classificationThirdList = data.records;
                    });
                },
                getPartsClassificationSecondListByFirstId: function () {
                    var that = this;
                    $.peiJian.postMethod(peiJianUrlConfig.partsClassification.getPartsClassificationSecondListByFirstId, {
                        userId: that.userId,
                        id: that.details.partsClassificationFirstId,
                    }, function (data) {
                        that.classificationSecondList = data.records;
                    });
                },
                getPartsClassificationSecondListByFirstId2: function () {
                    var that = this;
                    $.peiJian.postMethod(peiJianUrlConfig.partsClassification.getPartsClassificationSecondListByFirstId, {
                        userId: that.userId,
                        id: that.details.relevantClassificationFirstId,
                    }, function (data) {
                        that.classificationSecondList2 = data.records;
                    });
                },
                getPartsClassificationFirstList: function () {
                    var that = this;
                    $.peiJian.postMethod(peiJianUrlConfig.partsClassification.getPartsClassificationFirstList, {
                        userId: that.userId
                    }, function (data) {
                        that.classificationFirstList = data.records;
                    });
                },
                getBrandList: function () {
                    var that = this;
                    $.peiJian.postMethod(peiJianUrlConfig.partsBrand.getBrandList, {
                        userId: that.userId
                    }, function (data) {
                        that.brandList = data.records;
                    });
                },
            },
            mounted: function () {
                var that = this;

                that.detailsId = $.peiJian.page.urlParams.detailsId ? $.peiJian.page.urlParams.detailsId : '';
                if (that.detailsId && that.detailsId != '') {
                    $.peiJian.postMethod(peiJianUrlConfig.parts.getDetailsById, {
                            id: that.detailsId
                        }, function (data) {
                            that.applicableDeviceList = data.applicableDevice;
                            that.applicablePartsList = data.applicableParts;
                            that.brandNumberList = data.brandNumber;
                            that.details = data.details;
                            // 适用的机型
                            if (that.applicableDeviceList && that.applicableDeviceList.length > 0) {

                                for (var i = 0; i < that.applicableDeviceList.length; i++) {

                                    var item = that.applicableDeviceList[i];
                                    that.getBrandListByTypeId(item);

                                    that.getModelListByBrandId(item);
                                }
                            }
                            // 适用的部件
                            if (that.applicablePartsList && that.applicablePartsList.length > 0) {
                                for (var i = 0; i < that.applicablePartsList.length; i++) {
                                    var item = that.applicablePartsList[i];

                                    that.getPartsTypeListByTypeId(item);

                                    that.getPropertyListByPartsTypeId(item);
                                }
                            }
                            // 配件分类及属性
                            if (that.applicablePartsList && that.applicablePartsList.length > 0) {
                                that.alias = that.details.alias;
                                that.getPartsClassificationSecondListByFirstId();
                                that.getPartsClassificationThirdListBySecondId();
                            }
                            // 其他属性

                            that.getPartsClassificationSecondListByFirstId2();

                        }, true
                    );
                }

                that.getTypeList();
                if (that.applicableDeviceList && that.applicableDeviceList.length > 0) {
                    for (var i = 0; i < that.applicableDeviceList.length; i++) {
                        that.applicableDeviceList[i].deviceTypeList = that.deviceTypeList;
                    }
                }
                //

                if (that.applicablePartsList && that.applicablePartsList.length > 0) {
                    for (var i = 0; i < that.applicablePartsList.length; i++) {
                        that.applicablePartsList[i].deviceTypeList = that.deviceTypeList;
                    }
                }
                that.getPartsClassificationFirstList();
                that.getBrandList();
                if (that.brandNumberList && that.brandNumberList.length > 0) {
                    for (var i = 0; i < that.brandNumberList.length; i++) {
                        that.brandNumberList[i].brandList = that.brandList;

                    }
                }
            }
        })
    ;
</script>

</body>
</html>